<template>
  <div id="friend-edit-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">好友编辑</h1>
      <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="saveFriendData">保存</button>
    </header>

    <div class="friend-edit-panel">
      <div class="mui-input-row">
        <label>备注:</label>
        <input type="text" placeholder="请输入好友备注" v-model="friendAlias"/>
      </div>
      <div class="mui-input-row">
        <label>分组:</label>
        <van-dropdown-menu>
          <van-dropdown-item v-model="friendGroupId" :options="nowUserGroup" />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="mui-table-view-cell friend-edit-swith-panel">
        <span>屏蔽好友</span>
        <div  :class="friendCare == 0 ? 'mui-switch' : 'mui-switch mui-active'" data-switch="1" @click="friendCare == 0 ? friendCare = 1 : friendCare = 0">
          <div class="mui-switch-handle"></div>
        </div>
    </div>
    <div class="mui-table-view-cell friend-edit-swith-panel">
        <span>特别关心</span>
        <div  :class="friendShielding == 0 ? 'mui-switch' : 'mui-switch mui-active'" data-switch="1" @click="friendShielding == 0 ? friendShielding = 1 : friendShielding = 0">
          <div class="mui-switch-handle"></div>
        </div>
    </div>
    <div class="friend-edit-del">
        <button type="button" class="mui-btn mui-btn-danger">删除好友</button>
    </div>
    
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";
import { DropdownMenu, DropdownItem } from "vant";

Vue.use(DropdownMenu).use(DropdownItem);
export default {
  data() {
    return {
      friendAlias: "",
      friendGroupId: "",
      friend_id : "",
      friendCare : 0,
      friendShielding : 0,
      nowUserGroup: []
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },

    saveFriendData: function() {
        var updateData = {
            friend_id : this.friend_id,
            friend_group : this.friendGroupId,
            friend_alias : this.friendAlias
        };
        axios({
            method : 'post',
            url : api.friend.edit,
            data : updateData
        }).then((res) => {
            res = res.data;
            Toast(res.msg);
        });
    }
  },
  created() {
    axios({
      method: "post",
      url: api.friend.getFriendEditGroup
    }).then(res => {
      this.nowUserGroup = res.data.data;
    });
    var friend_id = this.$route.query.friend_id;
    this.friend_id = friend_id;
    axios({
      method: "post",
      url: api.friend.getFriendById,
      data: {
        target_id: friend_id
      }
    }).then((res) => {
        res = res.data.data;
        this.friendAlias = res.group.friend_alias;
        this.friendGroupId = res.group.friend_group;
    });
  }
};
</script>
<style>
.friend-edit-panel {
  background: #ffffff;
  padding-top: 56px;
}
#friend-edit-body .van-dropdown-menu.van-hairline--top-bottom {
  position: absolute;
  left: 125px;
  line-height: 40px;
  height: 40px;
}
.friend-edit-del{
    width: 100%;
    text-align: center;
    margin-top: 80px;
}
.friend-edit-del button{
    width: 150px;
    line-height: 26px;
}
.friend-edit-swith-panel{
  background: #ffffff;
}

.mui-table-view-cell:after{
    position: relative;
}
</style>